
import React, { useEffect, useState } from 'react'
import '../../css/public.less'
import './css/OrderExchangeCss/OrderExchangeDispose.less'
import { Input, DatePicker, Space, Button, Table, Modal, Tag, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom'
import { getOrderRefundById, setRefundRes } from '../../../api/OrderApi'
import getSelectTime from '../../../utils/date'
const { TextArea } = Input;

//接口
interface DataType {
    key: React.Key;
    orderId: number;
    marketState: number
    marketTime: string;
    reseonId: number;
    reasonApplication: string;//申请原因
    payMoney: number;
    orderTotal: number;
    reMeth: number;
    salesType: number;
    handlingRemark: string;//处理备注
    handlingTime: string;//处理时间
    marketNum: string,
}


const RefundDetails = () => {
    const [marketNum, setMarketNum] = useState<string>()  //订单编号
    const [handlingProcessor, setHandlingProcessor] = useState<string>()  //申请人
    const [marketTime, setMarketTime] = useState<string>()    //申请时间
    const [handlingTime, setHandlingTime] = useState<string>()  //处理时间
    const [handlingRemark, setHandlingRemark] = useState<string>()    //处理意见
    const [orderTotal, setOrderTotal] = useState<number>()    //订单金额
    const [payMoney, setPayMoney] = useState<number>()    //确认金额
    const [reasonApplication, setReasonApplication] = useState<string>()    //申请原因
    const [input, setInput] = useState<string>('')      //修改备注input的值
    const [data, setData] = useState<DataType[]>([])
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false)      //修改备注的弹框
    const [remark, setRemark] = useState<string | undefined>('')    //修改备注的值
    //路由接受参数
    const locatioin = useLocation()
    // 解构出state
    const { state } = locatioin;
    // console.log('state', state);


    // 请求退款详情信息
    useEffect(() => {
        getAll()
    }, [])

    const getAll = () => {
        getOrderRefundById({
            orderId: state
        }).then(res => {
            console.log('退款详情信息', res.data);
            const { marketNum, handlingProcessor, handlingTime, marketTime, handlingRemark, orderTotal, payMoney, reasonApplication } = res.data
            setMarketNum(marketNum)
            setHandlingProcessor(handlingProcessor)
            setMarketTime(marketTime)
            setHandlingRemark(handlingRemark)
            setOrderTotal(orderTotal)
            setHandlingTime(handlingTime)
            setPayMoney(payMoney)
            setReasonApplication(reasonApplication)
            setData([res.data])
        }).catch(err => {
            console.log('err444', err);
        })
    }

    //数据解构用于页面渲染
    let orderId = { ...data[0] }.orderId;
    let marketState = { ...data[0] }.marketState;
    let reseonId = { ...data[0] }.reseonId;
    let reMeth = { ...data[0] }.reMeth;
    let salesType = { ...data[0] }.salesType;


    // 点击确认退款
    const okReimburse = () => {
        let date = new Date()
        console.log('当前时间是多少', date);
        console.log('点击了同意退款');
        setRefundRes({
            orderId: orderId,
            handlingOpinions: 2,        //2表示同意退款/退货
            handlingProcessor: handlingProcessor,
            handlingTime: getSelectTime(date)
        }).then(res => {
            console.log('同意退款', res);

        }).catch(err => {
            console.log('err退款成功', err);

        })

    }

    // 点击拒绝退款
    const refuseReimburse = () => {
        console.log('点击了拒绝退款');
        setRefundRes({
            orderId: orderId,
            handlingOpinions: 3,        //3表示拒绝退款/退货
            handlingProcessor: handlingProcessor,
        }).then(res => {
            console.log('拒绝退款', res);

        }).catch(err => {
            console.log('err退款失败', err);

        })
    }


    //获取修改后备注
    //点击修改备注是的初始值
    useEffect(() => {
        setRemark(handlingRemark)
    }, [handlingRemark])

    // const handleChange = (e: any) => {
    //     let input = e.target.value
    //     setInput(input);
    //     console.log('order', input);
    // }
    //点击确认修改备注
    const filterInput = () => {
        setIsModalOpen(true)
        console.log('获取修改后的备注', input);

    }

    //  文本框值变化的回调函数
    const changeHandle = (e: any) => {
        console.log('无语回家了开门', e.target.value);
        setRemark(e.target.value)
    }

    //修改备注确认按钮
    const handleOk = () => {
        setIsModalOpen(false)
        // 发请求修改备注信息
        setRefundRes({
            orderId: orderId,
            handlingRemark: remark
        }).then(res => {
            console.log('修改成功', res);
            message.success('修改备注成功')
            getAll()
        }).catch(err => {
            console.log('err34343434', err);
        })
    };

    const handleCancel = () => {
        setIsModalOpen(false)
    };


    // 判断当前退款处于什么状态根据状态实时渲染相对应的结构
    let oDiv = null;
    let DealInfo = null;
    if (marketState == 1) {
        console.log('待处理申请');

        oDiv = <div>
            <button className='button-del' onClick={okReimburse}>确认退款</button>
            <button className='button-trun' onClick={refuseReimburse}>拒绝退款</button>
        </div>

        DealInfo = <div className='banner-thear'>
            <ul className='banner-left'>
                <li>处理备注</li>
            </ul>
            <ul className='banner-right'>
                <li><Input type='text' className='banner-input' /></li>
            </ul>
        </div>
    } else if (marketState == 2) {
        // console.log('已处理申请');

        oDiv = <div>
            <button className='button-trunone' onClick={filterInput}>修改处理备注</button>
        </div>
        DealInfo = <div className='banner-thear'>
            <ul className='banner-left'>
                <li>处理人</li>
                <li>处理备注</li>
                <li>处理时间</li>
            </ul>
            <ul className='banner-right'>
                <li><p>{handlingProcessor}</p></li>
                <li><p>{handlingRemark}</p></li>
                <li><p>{handlingTime}</p></li>
            </ul>
        </div>
    }



    return (
        <div className='OrderExchangeDispose'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>退款申请详情</p>
                </div>
            </div>

            {/* 内容区 */}
            <div className='page-context'>
                {/* 查询部分 */}
                <div className='banner-search'>
                    <div className='banner-query'>
                        <p>退款详情</p>
                    </div>
                </div>
                {/* 数据表格部分 */}
                <div className='data-list'>
                    <div className='banner-foter'>
                        <div>
                            <ul className='banner-left'>
                                <li>订单编号</li>
                                <li>申请状态</li>
                                <li>申请时间</li>
                                <li>用户账号</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>{orderId}</p></li>
                                <li><p>{marketState == 1 ? <Tag color="#f50">待处理</Tag> : marketState == 2 ? <Tag color="#2db7f5">已处理</Tag> : <Tag color="#87d068">已拒绝</Tag>}</p></li>
                                <li><p>{marketTime}</p></li>
                                <li><p>{marketNum}</p></li>
                            </ul>
                        </div>
                        <div className='banner-context'>
                            <ul className='banner-left'>
                                <li>订单金额</li>
                                <li>确认金额</li>
                                <li>退款方式</li>
                                <li>售后类型</li>
                                <li>申请原因</li>
                                <li>处理意见</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>{payMoney}</p></li>
                                <li><p>{orderTotal}</p></li>
                                <li><p>{reMeth == 1 ? '微信' : '支付宝'}</p></li>
                                <li><p>{salesType == 1 ? <Tag color="#EF7C15">退款</Tag> : salesType == 2 ? <Tag color="#2CC359">退货</Tag> : <Tag color="#F9713E">退款</Tag>}</p></li>
                                <li><p>{reasonApplication}</p></li>
                                <li><p>{handlingRemark}</p></li>
                            </ul>
                        </div>
                        {/* <div className='banner-thear'>
                            <ul className='banner-left'>
                                <li>处理人</li>
                                <li>处理备注</li>
                                <li>处理时间</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>{handlingProcessor}</p></li>
                                <li><Input defaultValue='' onChange={handleChange} className='banner-input' /></li>
                                <li><p>{handlingTime}</p></li>
                            </ul>
                        </div> */}
                        {/* 处理信息动态渲染部分 */}
                        {DealInfo}
                    </div>
                    <div className='banner-list-button'>
                        {/* 动态渲染按钮部分 */}
                        {oDiv}
                        {/* <button className='button-trun' onClick={filterInput}>修改处理备注</button> */}
                    </div>
                </div>
            </div>

            <Modal centered={true} title="修改备注信息" open={isModalOpen} forceRender onOk={handleOk} onCancel={handleCancel}>
                <TextArea rows={4} value={remark} showCount onChange={() => changeHandle(event)} />

            </Modal>
        </div>
    )
}


export default RefundDetails







// import React, { useState } from 'react'
// import '../../css/public.less'
// import './css/OrderRefundCss/OrderRefundDetail.less'
// import { Input, DatePicker, Space, Button, Table, Modal, DatePickerProps } from 'antd';
// import { useNavigate, useLocation } from 'react-router-dom'


// const OrderRefundDetail = () => {


//     // 路由接受参数
//     const locatioin = useLocation()
//     // 解构出state
//     const { state } = locatioin;
//     console.log('state', state);





//     return (
//         <div className='OrderRefundDetail'>
//             {/* 头部 */}
//             <div className='page-top'>
//                 {/* 左边标题 */}
//                 <div className='page-title'>
//                     <p>退款申请详情</p>
//                 </div>
//             </div>

//             {/* 内容区 */}
//             <div className='page-context'>
//                 {/* 查询部分 */}
//                 <div className='banner-search'>
//                     <div className='banner-query'>
//                         <p>退款申请详情</p>
//                     </div>
//                 </div>
//                 {/* 数据表格部分 */}
//                 <div className='data-list'>
//                     <div className='banner-foter'>
//                         <div>
//                             <ul className='banner-left'>
//                                 <li>订单编号</li>
//                                 <li>申请状态</li>
//                                 <li>申请时间</li>
//                                 <li>用户账号</li>
//                             </ul>
//                             <ul className='banner-right'>
//                                 <li><p>27823424023</p></li>
//                                 <li><p>待处理</p></li>
//                                 <li><p>2018-01-09 14:30:29</p></li>
//                                 <li><p>189 3049 3829</p></li>
//                             </ul>
//                         </div>
//                         <div className='banner-context'>
//                             <ul className='banner-left'>
//                                 <li>订单金额</li>
//                                 <li>确认金额</li>
//                                 <li>退款方式</li>
//                                 <li>售后类型</li>
//                                 <li>申请原因</li>
//                                 <li>处理意见</li>
//                             </ul>
//                             <ul className='banner-right'>
//                                 <li><p>999.00</p></li>
//                                 <li><p>999.00</p></li>
//                                 <li><p>按原支付通道退回</p></li>
//                                 <li><p>退货</p></li>
//                                 <li><p>商品质量有问题</p></li>
//                                 <li><p>同意退货</p></li>
//                             </ul>
//                         </div>
//                         <div className='banner-thear'>
//                             <ul className='banner-left'>
//                                 <li>处理备注</li>
//                             </ul>
//                             <ul className='banner-right'>
//                                 <li><Input type='text' className='banner-input' /></li>
//                             </ul>
//                         </div>
//                     </div>
//                     <div className='banner-list-button'>
//                         <button className='button-del'>确认退款</button>
//                         <button className='button-trun'>拒绝退款</button>
//                     </div>
//                 </div>
//             </div>
//         </div>
//     )
// }


// export default OrderRefundDetail
